let template = `
<div>
   <f-modal class="ffv" :width="modalWidth" :height="modalHeight" name="text-modal">
    <template v-if="isPic(modalText)">
        <img :src="getFilePath(modalText)" />
    </template>
    <template v-else>
        <div v-html="modalText"></div>
</template>
  </f-modal>
   <f-modal  class="ffv" :width="modalWidth":height="modalHeight"
           name="video-modal">
    <video-player
        class="vjs-custom-skin"
         ref="videoPlayer"
         :options="playerOptions"
         :playsinline="true"
    >
    </video-player>
  </f-modal>
</div>
`



var style = document.createElement('style');
style.id = 'k-style';
style.type = 'text/css';
style.innerHTML = `
.ffv .vm--modal { overflow: auto; }
`;
document.getElementsByTagName('head')[0].appendChild(style);

let videoMixin = {
  data() {
    let modalWidth = window.innerWidth
    return {
      modalWidth,
      modalHeight: window.innerHeight * .8,
      playerOptions: {
        width: modalWidth,
        autoplay: false,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: "video/mp4",
          // mp4
          // src: "http://vjs.zencdn.net/v/oceans.mp4",
          // webm
          // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
        }],
        // poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
      }
    }
  },
  methods: {
    showVideoModal( {  src = ''  } = { }) {
      this.playerOptions.sources[0].src = src
      this.$modal.show('video-modal');
    }
  }
}

let textMixin = {
  data() {
    return {
      modalText: ''
    }
  },
  methods: {
    showTextModal( {  modalText = '',   } = { }) {
      this.modalText = modalText
      this.$modal.show('text-modal');
    },
    isPic(modalText) {
      let array = ['jpg', 'svg', 'png', 'gif', 'jpeg', 'jfif']
      return array.includes(modalText.extname)
    }
  }
}
export default {
  template,
  mixins: [
    textMixin,
    videoMixin
  ],
  data() {
    return {
      modalDir: ''
    }
  },
  methods: {
    getFilePath(obj = {}) {
      console.log(obj.dirname, obj.dirname.replace(window.baseFolder, ''))

      let v = obj.dirname.replace(window.baseFolder, '')
      if (v.startsWith('\\')) {
        v = v.slice(1)
      }
      console.log(v)
      return this.getServerPath(v.replace(/\\/g, '/') + '/' + obj.pathname)
    },
    getServerPath(v) {
      return `http://${location.hostname}:8080/` + v
    },
    show(name, dir, obj = {}) {
      // this.$modal.show(name);
      this.modalDir = dir
      if (obj) {
        if (obj.extname === 'mp4') {
          this.showVideoModal({
            src: this.getServerPath(obj.pathname),
          })
        } else {
          this.showTextModal({
            modalText: obj,
          })
        }
      }
    }
  }
}
